<div class="mediaSelectorConfigure">
	<form role="form">
		<div class="form-group">
			<label><%= lblURL %>
        <span class="configureHelp fa fa-info-circle" data-toggle="tooltip" data-title="<%= lblURLHelp %>"></span>
      </label>
			<input type="text" class="form-control mediaURL" placeholder="<%= lblURLPHHTTPS %>">
			<p class="mediaURLError"><%= lblURLError %></p>
		</div>
		<% if ( mode == "inlineText" ) { %>
			<div class="inline-image">
				<div class="form-group">
					<label style="display: block"><%= lblLabel %></label>
					<textarea class="form-control mediaTitle" spellcheck="true" placeholder="<%= lblLabelPH %>" style="height: 74px; margin-top: 5px;"></textarea>
				</div>
				<div class="form-group">
					<div class="checkbox">
						<label>
							<input type="checkbox" value="opt-maximize">
							<%= lblMaximize %>
                <span class="configureHelp fa fa-info-circle" data-toggle="tooltip" data-title="<%= lblMaximizeHelp %>"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="inline-video">
				<label style="display: block; margin-bottom: 15px; margin-left: 122px;"><%= lblPosition %></label>
				<div style="text-align: center">
					<div class="media-configure-position" data-val="fit">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-fit.png" />
						<div class="position-lbl"><%= lblPosition3 %></div>
						<div><%= lblPosition3Explain2 %></div>
					</div>

					<div class="media-configure-position" data-val="custom">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-custom.png" />
						<div class="position-lbl"><%= lblPosition5 %></div>
						<div class="position-params">
							<div>
								<input type="text" class="form-control input-sm posCustomW" placeholder="<%= phWidth %>" style="display: inline-block; width: 65px;">
								<a href="#" class="dimHelp" data-toggle="tooltip">
									<img src="resources/tpl/builder/icons/builder-help.png"/>
								</a>
							</div>
							<div style="margin-top: 2px;">
								<input type="text" class="form-control input-sm posCustomH" placeholder="<%= phHeight %>" style="display: inline-block; width: 65px;">
								<a href="#" class="dimHelp2" data-toggle="tooltip">
									<img src="resources/tpl/builder/icons/builder-help.png"/>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--
			<div class="form-group">
				<label style="display: block">Alignment</label>
				<label class="checkbox-inline" style="margin-left: -18px;">
					<input type="radio" name="mediaDisplay" value="none"> None
				</label>
				<label class="checkbox-inline">
					<input type="radio" name="mediaDisplay" value="left"> Left
				</label>
				<label class="checkbox-inline">
					<input type="radio" name="mediaDisplay" value="center"> Center
				</label>
				<label class="checkbox-inline">
					<input type="radio" name="mediaDisplay" value="right"> Right
				</label>
			</div>
			-->
		<% } if ( mode == "mainMedia" ) { %>
			<div class="form-group position-image">
				<label style="display: block; margin-bottom: 15px;"><%= lblPosition %></label>
				<div>
					<div class="media-configure-position" data-val="fill">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-fill.png" />
						<div class="position-lbl"><%= lblPosition2 %></div>
						<div><%= lblPosition2Explain %></div>
					</div>

					<div class="media-configure-position" data-val="fit">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-fit.png" />
						<div class="position-lbl"><%= lblPosition3 %></div>
						<div><%= lblPosition3Explain %></div>
					</div>

					<div class="media-configure-position" data-val="stretch">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-stretch.png" />
						<div class="position-lbl"><%= lblPosition4 %></div>
						<div><%= lblPosition4Explain %></div>
					</div>

					<div class="media-configure-position" data-val="center">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-center.png" />
						<div class="position-lbl"><%= lblPosition1 %></div>
					</div>
				</div>
			</div>
			<div class="form-group position-video">
				<label style="display: block; margin-bottom: 15px;"><%= lblPosition %></label>
				<div style="text-align: center">
					<div class="media-configure-position" data-val="stretch">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-stretch.png" />
						<div class="position-lbl"><%= lblPosition2 %></div>
					</div>

					<div class="media-configure-position" data-val="fit">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-fit.png" />
						<div class="position-lbl"><%= lblPosition3 %></div>
					</div>

					<div class="media-configure-position" data-val="center">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-center.png" />
						<div class="position-lbl"><%= lblPosition1 %></div>
					</div>

					<div class="media-configure-position" data-val="custom">
						<div class="position-selected"></div>
						<img class="position-img" src="app/storymaps/common/_resources/icons/media-configure-position-custom.png" />
						<div class="position-lbl"><%= lblPosition5 %></div>
						<div class="position-params">
							<div>
								<input type="text" class="form-control input-sm posCustomW" placeholder="<%= phWidth %>" style="display: inline-block; width: 65px;">
								<a href="#" class="dimHelp" data-toggle="tooltip">
									<img src="resources/tpl/builder/icons/builder-help.png"/>
								</a>
							</div>
							<div style="margin-top: 2px;">
								<input type="text" class="form-control input-sm posCustomH" placeholder="<%= phHeight %>" style="display: inline-block; width: 65px;">
								<a href="#" class="dimHelp2" data-toggle="tooltip">
									<img src="resources/tpl/builder/icons/builder-help.png"/>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		<% } %>
		<div class="form-group mediaUnloadStrategy">
			<div class="checkbox">
				<label>
					<input type="checkbox" class="navigateOutUnload" />
					<%= unloadLbl %>
					<a href="#" class="unloadHelp" data-toggle="tooltip" data-title="<%= unloadHelp %>">
						<img src="resources/tpl/builder/icons/builder-help.png"/>
					</a>
				</label>
			</div>
		</div>
		<div class="form-group embedProtocol">
			<div class="checkbox">
				<label>
					<input type="checkbox" class="embedProtocolSecure" />
					<%= embedProtocolLabel %>
				</label>
				<!-- note: if there's any space between an img link and its closing </a>, an underline will appear on hover -->
				<a href="#" class="protocolHelp" data-toggle="tooltip" data-title="<%= embedProtocolInfo %>"><img src="resources/tpl/builder/icons/builder-help.png"/></a>
				<a href="http://links.esri.com/storymaps/blogs_mixed_content/" target="_blank"><%= learn %></a>
			</div>
		</div>
		<% if ( mode == "mainMedia" ) { %>
			<div class="form-group useParentOrigin hidden">
				<div class="checkbox">
					<label>
						<input type="checkbox" class="useParentOriginEnabled" />
						<%= useParentOriginLabel %>
					</label>
					<!-- note: if there's any space between an img link and its closing </a>, an underline will appear on hover -->
					<a href="#" class="useParentOriginHelp" data-toggle="tooltip" data-title="<%= useParentOriginTooltip %>"><img
							src="resources/tpl/builder/icons/builder-help.png" /></a>
					<a href="https://support.esri.com/en/Technical-Article/000021734" target="_blank"><%= learn %></a>
				</div>
			</div>
		<% } %>
		<div class="alt-text-wrapper">
			<div class="form-group">
				<label><%= lblAltText %></label>
				<a href="#" class="altTextHelp" data-toggle="tooltip" data-title="<%= tooltipAltText %>">
					<img src="resources/tpl/builder/icons/builder-help.png"/>
				</a>
				<textarea class="form-control alt-text" spellcheck="true" placeholder="<%= placeholderAltText %>"></textarea>
			</div>
		</div>
	</form>
</div>
